<template>
	<div>
		<el-col :span="8" class="card">
            <div class="title">{{title}}</div>
            <div class="info">{{title}}正在使用账号：{{select}}</div>
            <div class="label">充值账号设置：</div>
            <div class="inputWrap">
            	充值账号：
            	<el-select v-model="value" placeholder="请选择" class="select">
				    <el-option
						v-for="item in dataArr"
						:key="item.id"
						:label="item.company"
						:value="item.id">
				    </el-option>
			  	</el-select>
            </div>
            <el-button type="primary" class="submit" @click="submitBtn()">确定</el-button>
        </el-col>
	</div>
</template>
<script>
	export default { 
		props: ['title','dataArr'],       
        data() {
            return {
            	value : '',
            	select: '空'
            }
        },
        watch: {
			dataArr:{
				handler:function(){
					this.dataArr.forEach((ele,i)=>{
						if(ele.status == 1){
							this.select = ele.company;
						}
					})
				},
				immediate:true //实现初始化时监听 
			}
        },
        created(){
        },
        mounted(){
            
        },
        methods: {
            submitBtn(){
            	if(this.value == ''){
            		this.$message.error('请选择充值账号！');
            		return false;
            	}
            	this.$axios
                    .post("/admin/provider/updateUsingAccount.json",{
                    	id : this.value
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.$message.success('账号切换成功！');
                            this.$emit('getData');    //更新数据
                            this.value = '';   //清空选中选项
                        }else{
                            this.$message.error(data.message);
                        }
                    })
            }
        }
    }
</script>

<style scoped>
	.card{
		text-align: center;
		padding: 20px 10px;
	}
	.card .title,.card .label{
		font-weight: bold;
		font-size: 18px;
		padding-bottom: 20px;
	}
	.card .label{
		padding-top: 20px;	
	}
	.card .select{
		width: 200px;
	}
	.submit{
		margin-top: 40px;
		width: 160px;
	}
</style>